extensionPrefs: Tweak UI

Update according to the latest mockups:
 - don't use a border around the list as specified
   by the latest HIG version
 - use more generous spacing between controls
 - allow extension descriptions to take up two lines
 - drop GNOME branding from the window title
 - make the app name consistent with the window title

https://bugzilla.gnome.org/show_bug.cgi?id=778672

diff --git a/data/gnome-shell-extension-prefs.desktop.in.in b/data/gnome-shell-extension-prefs.desktop.in.in
index d96292c30b5ddfa7b839830fa78e7866a870d76c..1b144c5bd303e8b1338d3fdc1b0c6d4ad0e2b844 100644 (file)
--- a/data/gnome-shell-extension-prefs.desktop.in.in
+++ b/data/gnome-shell-extension-prefs.desktop.in.in
@@ -1,6 +1,6 @@
 [Desktop Entry]
 Type=Application
-Name=GNOME Shell Extension Preferences
+Name=Shell Extensions
 Comment=Configure GNOME Shell Extensions
 Exec=@bindir@/gnome-shell-extension-prefs %u
 X-GNOME-Bugzilla-Bugzilla=GNOME

diff --git a/js/extensionPrefs/main.js b/js/extensionPrefs/main.js
index 7bbf0fa21b82bc974f9c17f33277273caa98efec..0277de042dd4ab61745f65a0d79b236a79485567 100644 (file)
--- a/js/extensionPrefs/main.js
+++ b/js/extensionPrefs/main.js
@@ -143,10 +143,10 @@ const Application = new Lang.Class({
         this._window = new Gtk.ApplicationWindow({ application: app,
                                                    window_position: Gtk.WindowPosition.CENTER });
 
-        this._window.set_size_request(800, 500);
+        this._window.set_default_size(800, 500);
 
         this._titlebar = new Gtk.HeaderBar({ show_close_button: true,
-                                             title: _("GNOME Shell Extensions") });
+                                             title: _("Shell Extensions") });
         this._window.set_titlebar(this._titlebar);
 
         let killSwitch = new Gtk.Switch({ valign: Gtk.Align.CENTER });
@@ -157,11 +157,7 @@ const Application = new Lang.Class({
                             Gio.SettingsBindFlags.BIND_DEFAULT |
                             Gio.SettingsBindFlags.INVERT_BOOLEAN);
 
-        let scroll = new Gtk.ScrolledWindow({ hscrollbar_policy: Gtk.PolicyType.NEVER,
-                                              shadow_type: Gtk.ShadowType.IN,
-                                              halign: Gtk.Align.CENTER,
-                                              propagate_natural_width: true,
-                                              margin: 18 });
+        let scroll = new Gtk.ScrolledWindow({ hscrollbar_policy: Gtk.PolicyType.NEVER });
         this._window.add(scroll);
 
         this._extensionSelector = new Gtk.ListBox({ selection_mode: Gtk.SelectionMode.NONE });
@@ -254,6 +250,18 @@ const Application = new Lang.Class({
     }
 });
 
+const DescriptionLabel = new Lang.Class({
+    Name: 'DescriptionLabel',
+    Extends: Gtk.Label,
+
+    vfunc_get_preferred_height_for_width: function(width) {
+        // Hack: Request the maximum height allowed by the line limit
+        if (this.lines > 0)
+            return this.parent(0);
+        return this.parent(width);
+    }
+});
+
 const ExtensionRow = new Lang.Class({
     Name: 'ExtensionRow',
     Extends: Gtk.ListBoxRow,
@@ -284,7 +292,8 @@ const ExtensionRow = new Lang.Class({
         let extension = ExtensionUtils.extensions[this.uuid];
 
         let hbox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
-                                 hexpand: true, margin: 12, spacing: 6 });
+                                 hexpand: true, margin_end: 24, spacing: 24,
+                                 margin: 12 });
         this.add(hbox);
 
         let vbox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL,
@@ -298,9 +307,9 @@ const ExtensionRow = new Lang.Class({
         vbox.add(label);
 
         let desc = extension.metadata.description.split('\n')[0];
-        label = new Gtk.Label({ label: desc,
-                                ellipsize: Pango.EllipsizeMode.END,
-                                halign: Gtk.Align.START });
+        label = new DescriptionLabel({ label: desc, wrap: true, lines: 2,
+                                       ellipsize: Pango.EllipsizeMode.END,
+                                       xalign: 0, yalign: 0 });
         vbox.add(label);
 
         let button = new Gtk.Button({ valign: Gtk.Align.CENTER,